<template>
  <el-dialog
    :title="isEdit ? '编辑规格' : '新增规格'"
    v-model="visible"
    width="500px"
    @close="handleClose"
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="关联商品ID" prop="goodId">
        <el-input-number v-model="form.goodId" :min="1" style="width: 100%" placeholder="请输入商品ID" />
      </el-form-item>

      <el-form-item label="颜色集合" prop="color">
        <el-input v-model="form.color" placeholder="如: 白色,黑色 (逗号分隔)" />
      </el-form-item>
      
      <el-form-item label="尺码/规格" prop="spec">
        <el-input v-model="form.spec" placeholder="如: S,M,L (逗号分隔)" />
      </el-form-item>

      <el-form-item label="销售价格" prop="price">
        <el-input-number 
          v-model="form.price" 
          :precision="2" 
          :step="0.1" 
          :min="0" 
          style="width: 100%" 
          placeholder="请输入价格" 
        />
      </el-form-item>

      <el-form-item label="总库存" prop="stock">
        <el-input-number v-model="form.stock" :min="0" style="width: 100%" placeholder="请输入库存数量" />
      </el-form-item>

    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          {{ isEdit ? '保存' : '添加' }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  isEdit: Boolean,
  specData: Object,
  loading: Boolean
})

const emit = defineEmits(['update:visible', 'success'])

const visible = ref(props.visible)
const formRef = ref()

const form = reactive({
  id: null,
  goodId: undefined,
  color: '',
  spec: '',
  price: 0.00,
  stock: 0
})

const rules = reactive({
  goodId: [
    { required: true, message: '请输入关联商品ID', trigger: 'blur' }
  ],
  color: [
    { required: true, message: '请输入颜色集合', trigger: 'blur' }
  ],
  spec: [
    { required: true, message: '请输入规格集合', trigger: 'blur' }
  ],
  price: [
    { required: true, message: '请输入价格', trigger: 'blur' }
  ],
  stock: [
    { required: true, message: '请输入库存', trigger: 'blur' }
  ]
})

// 同步 visible
watch(() => props.visible, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:visible', val)
  if (!val) {
    handleClose()
  }
})

// 回显数据
watch(() => props.specData, (val) => {
  if (props.isEdit && val) {
    form.id = val.id
    form.goodId = val.goodId
    form.color = val.color
    form.spec = val.spec
    form.price = val.price
    form.stock = val.stock
  } else {
    resetForm()
  }
}, { immediate: true, deep: true })

// 每次打开如果是新增模式，重置表单
watch(() => props.visible, (val) => {
  if (val && !props.isEdit) {
    resetForm()
  }
})

function resetForm() {
  form.id = null
  form.goodId = undefined
  form.color = ''
  form.spec = ''
  form.price = 0.00
  form.stock = 0
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

const handleClose = () => {
  if (formRef.value) {
    formRef.value.clearValidate()
  }
  emit('update:visible', false)
}

const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('success', { ...form })
    }
  })
}
</script>

